<!--
 * @description: 
 * @Author: Islands
 * @Date: 2023-12-05 10:48:15
 * @LastEditTime: 2024-03-28 01:38:49
-->
<script lang='ts' setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import SvgIcon from '@/components/svg-icon/index.vue';
import { useLocalStore } from '@/store/index'
import { animatesConstant,themeConstant } from '@/constant/index'
const { layout, animation,themes } = storeToRefs(useLocalStore());
const drawer = ref<boolean>(false)
const handleClose = () => {
    drawer.value = false;
}
const change = (bool: any) => {
    drawer.value = !bool
};


const themesChange=(_val: any)=>{
    themes.value=_val
    document.documentElement.setAttribute('themes', _val)
}
</script>
<template>
    <div class="h-auto" @click="change(drawer)">
        <svg-icon icon="#icon-shezhi" pointerStyle="pointer" size="2em" />
    </div>

    <!-- 抽屉 -->
    <el-drawer custom-class="drawer" v-model="drawer" size="400" append-to-body :title="$t(`el.tooltip.setting`)"
        :before-close="handleClose">
        <el-scrollbar :wrap-style="{ height: '100%' }">
            <div class="carousel">
                <el-carousel ref="carouselRef" arrow="never" trigger="click" :initial-index="layout" :autoplay="false"
                    indicator-position="outside" height="200px" @change="change">
                    <!-- <el-carousel-item v-for="item in layoutConstant($t)" :key="item.key">
                        <component :is="item.value" :name="item.name" />
                    </el-carousel-item> -->
                </el-carousel>
            </div>
            <el-divider content-position="center">{{ $t(`divider.title.theme`) }}</el-divider>
            <div class="animate">
                <el-select-v2 v-model="themes" :options="themeConstant($t)" style="width: 200px" @change="themesChange"/>
            </div>
            <el-divider content-position="center">{{ $t(`el.animate.title`) }}</el-divider>
            <div class="animate">
                <h1>{{ $t(`el.animate.home`) }}</h1>
                <transition :enter-active-class="`animate__animated ` + animation.value" appear>
                    <div class="animate">
                        <el-select-v2 v-model="animation.value" :options="animatesConstant($t)" style="width: 100px" />
                    </div>
                </transition>
                <!-- -->
            </div>
        </el-scrollbar>
    </el-drawer>
</template>
<style lang='scss' scoped>
:deep(.el-drawer__body) {
    padding-top: 0;
}
</style>